<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>userlit列表</title>
    <meta name="author" content="小柒2012" />
    <meta name="site" content="https://blog.52itstyle.com" />
    <link rel="stylesheet" th:href="@{/iview/iview.css}">
    <script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
    <script th:src="@{/common.js}" type="text/javascript"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>



<div id="app2" v-cloak>
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
        </thead>
        <tbody><!--数据很多没有分页，一次性的查出来所有数据，对数据库压力过大，应该一次查4-5也数据，然后分页展示，但是了，总页数要显示 -->
        <tr v-for="user in userlist">
            <td v-text="user.uid"></td>
            <td v-text="user.username"></td>
            <td v-text="user.mobile"></td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script th:inline="javascript">
    //  ctx: /quartz/         captchaType: null
    var ctx = [[@{/}]];
    var captchaType = [[${captchaType}]];
    console.log('ctx'+ctx+'  captchaType'+captchaType);
</script>
<script>
    //方式2使用axios,和created方式差不多一样
    new Vue({
        el: '#app2',
        data: {
            userlist: []
        },
        mounted () {
            this.fetchMsg()
        },
        methods: {
            fetchMsg () {
                axios.get('../user/userlist2').then(response => {
                    return response.data
                }).then(data => {
                    console.log(data)
                    this.userlist = data
                }).catch(error => {
                    console.log(error.message)
                })
            }
        }
    })


</script>
<script>



</script>


</body>


</html>